<template>
  <div class="padding-y-15 padding-x-30">
    <a-form
      :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 22 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col
          :md="6"
          :sm="12"
          :xs="10"
          style="
            height: calc(100vh - 120px);
            overflow-y: auto;
            background-color: #fff;
            padding-left: 0;
            padding-right: 0;
          "
        >
          <div class="flex align-center justify-between padding-15">
            <span class="fs-16">挂单单据</span>
            <div class="flex align-center hands" @click="showsearch = true">
              <file-search-outlined />
              <span class="fs-14">查询</span>
            </div>
          </div>
          <div class="flex align-center">
            <a-input-search
              class="flex1 fs-12 margin-x-10"
              placeholder="会员手机（支持后4为）"
              v-model:value="form.mobile"
              @search="showMember = true"
            />
          </div>
          <div class="margin-top-15">
            <div
              class="margin-bottom-6 kd-solid padding-10"
              :class="[current == index ? 'bg-f5f5f5' : '']"
              v-for="(item, index) in list"
              :key="index"
              @click="getDetail(item, index)"
            >
              <div class="fs-12 ele-text-primary">{{
                item.order_sn || ''
              }}</div>
              <div class="fs-12 margin-y-6"
                >会员手机：{{ item.mobile || '' }}</div
              >
              <div class="fs-12">实收金额：¥{{ item.pay_amount || '' }}</div>
            </div>
          </div>
        </a-col>
        <a-col
          :md="18"
          :sm="12"
          :xs="14"
          style="padding-left: 0; padding-right: 0"
        >
          <div
            style="
              height: calc(100vh - 154px);
              background-color: #fff;
              border-left: 10px solid #f5f5f5;
              overflow-y: auto;
            "
          >
            <div
              class="flex align-center justify-center padding-15"
              style="border-bottom: 10px solid #f5f5f5"
            >
              <span class="fs-16">挂单单据</span>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">基本信息</span>
                <!-- <a-button>导出</a-button> -->
              </div>
              <table cellpadding="0" cellspacing="0" class="recepit_table2">
                <tbody>
                  <tr>
                    <td class="tit">销售单号</td>
                    <td>{{ info.order_sn || '' }}</td>
                    <td class="tit">销售时间</td>
                    <td>{{ info.sales_time || '' }}</td>
                    <td class="tit">来源</td>
                    <td>{{ info.store_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">收银员</td>
                    <td>{{ info.make_user_name || '' }}</td>
                    <td class="tit">支付方式</td>
                    <td>{{ info.pay_type_name || '' }}</td>
                    <td class="tit">消费动机</td>
                    <td>{{ info.motive_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">会员昵称</td>
                    <td>{{ info.nickname || '' }}</td>
                    <td class="tit">会员手机</td>
                    <td>{{ info.mobile || '' }} </td>
                    <td class="tit">客户来源</td>
                    <td>{{ info.from_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">主销导购</td>
                    <td>{{ info.main_salesman_name || '' }}</td>
                    <td class="tit">辅销导购</td>
                    <td>{{ info.vice_salesman_name || '' }} </td>
                    <td class="tit">销售班组</td>
                    <td>{{ info.salesman_team_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">备注</td>
                    <td colspan="5">{{ info.note || '' }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">首饰销售</span>
              </div>
              <vxe-table border ref="xTable1" align="center" :data="goods_list">
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column field="gold_weight" width="100" title="净金重" />
                <vxe-column
                  field="sales_gold_price"
                  width="100"
                  title="销售金价"
                />
                <vxe-column field="sales_labor" width="100" title="销售工费" />
                <vxe-column field="num" width="100" title="数量" />
                <vxe-column field="sticker_price" width="100" title="标签价" />
                <vxe-column
                  field="original_amount"
                  width="100"
                  title="原售价"
                />
                <vxe-column
                  field="coupon_amount"
                  width="120"
                  title="卡劵抵扣金额"
                />
                <vxe-column
                  field="real_discount"
                  width="100"
                  title="实售折扣(%)"
                />
                <vxe-column field="real_amount" width="100" title="实售价" />
                <vxe-column field="sales" width="100" title="销售标记" />
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">饰品销售</span>
              </div>
              <vxe-table
                border
                ref="xTable2"
                align="center"
                :data="ornament_list"
              >
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column field="gold_weight" width="100" title="净金重" />
                <vxe-column
                  field="sales_gold_price"
                  width="100"
                  title="销售金价"
                />
                <vxe-column field="sales_labor" width="100" title="销售工费" />
                <vxe-column field="num" width="100" title="数量" />
                <vxe-column field="sticker_price" width="100" title="标签价" />
                <vxe-column field="price_old" width="100" title="原售价" />
                <vxe-column
                  field="coupon_amount"
                  width="120"
                  title="卡劵抵扣金额"
                />
                <vxe-column
                  field="real_discount"
                  width="100"
                  title="实售折扣(%)"
                />
                <vxe-column field="real_amount" width="100" title="实售价" />
                <vxe-column field="sales" width="100" title="销售标记" />
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">新品换购</span>
              </div>
              <vxe-table
                border
                ref="xTable3"
                align="center"
                :data="new_exchange_list"
              >
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column field="gold_weight" title="净金重(g)" />
                <vxe-column field="piece_weight" title="货重(g)" />
                <vxe-column field="num" title="数量" />
                <vxe-column field="sticker_price" title="标签价" />
                <vxe-column field="real_amount" title="实售价" />
                <vxe-column field="exchange_gold_price" title="换购金价" />
                <vxe-column field="exchange_labour" title="换购工费" />
                <vxe-column field="discount_amount" title="抵扣金额" />
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">旧货换购</span>
              </div>
              <vxe-table
                border
                ref="xTable4"
                align="center"
                :data="junk_exchange_list"
              >
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column
                  field="gold_weight_old"
                  width="100"
                  title="原金重(g)"
                />
                <vxe-column field="gold_weight" width="100" title="现金重(g)" />
                <vxe-column field="piece_weight" width="100" title="货重(g)" />
                <vxe-column field="num" width="100" title="数量" />
                <vxe-column field="exchange_gold_price" title="换购金价" />
                <vxe-column field="exchange_labour" title="换购工费" />
                <vxe-column field="discount_amount" title="抵扣金额" />
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">旧货回收</span>
              </div>
              <vxe-table
                border
                ref="xTable5"
                align="center"
                :data="junk_recovery_list"
              >
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column
                  field="gold_weight_old"
                  width="100"
                  title="原金重(g)"
                />
                <vxe-column field="gold_weight" width="100" title="现金重(g)" />
                <vxe-column field="piece_weight" width="100" title="货重(g)" />
                <vxe-column field="num" width="100" title="数量" />
                <vxe-column field="exchange_gold_price" title="回收金价" />
                <vxe-column field="exchange_labour" title="回收工费" />
                <vxe-column field="discount_amount" title="抵扣金额" />
              </vxe-table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">赠品列表</span>
              </div>
              <vxe-table border ref="xTable6" align="center" :data="gift_list">
                <vxe-column
                  field="info"
                  title="货品信息"
                  width="150"
                  fixed="left"
                >
                  <template #default="{ row }">
                    <div>{{ row.bar_code }}</div>
                    <div class="margin-top-6">{{ row.name }}</div>
                  </template>
                </vxe-column>
                <vxe-column field="gold_weight" title="赠品小类" />
                <vxe-column field="sales_gold_price" title="品牌" />
                <vxe-column field="sales_labor" title="赠品类型" />
                <vxe-column field="num" title="赠品数量" />
                <vxe-column field="sticker_price" title="抵扣积分" />
              </vxe-table>
            </div>
          </div>
          <div
            class="bg-fff"
            style="
              background-color: #fff;
              border-left: 10px solid #f5f5f5;
              border-top: 1px solid #f5f5f5;
              padding-left: 10px;
            "
          >
            <div class="flex align-center">
              <div class="fs-14 fw-bolder"
                >合计：新品 {{ info.new || 0 }} 件，旧货
                {{ info.exchange || 0 }} 件
              </div>
              <div class="fs-14 fw-bolder margin-right-15 flex1 text-right"
                >抵扣金额（元）：{{
                  info.exchange_discount || 0
                }}，实收金额（元）：{{ info.pay_amount || 0 }}
              </div>
              <div class="flex align-center">
                <a-button type="primary" @click="continueOpt()"
                  >继续开单</a-button
                >
                <a-button @click="delOpt()">删除</a-button>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-form>

    <!-- 新增/编辑弹窗 -->
    <select-member
      v-if="showMember"
      v-model:visible="showMember"
      :memberVal="form.mobile"
      @getMember="getMember"
    />

    <!-- 查询弹窗 -->
    <search
      v-if="showsearch"
      v-model:visible="showsearch"
      @doSearch="doSearch"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import {
    PlusOutlined,
    UploadOutlined,
    ClearOutlined,
    FileSearchOutlined
  } from '@ant-design/icons-vue';
  import { message, Modal } from 'ant-design-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import { useRouter } from 'vue-router';
  import selectMember from '../../order/jewelry_order/components/select-member.vue';
  import search from './components/search.vue';
  import { get_maker_list, detail, del_maker } from '@/api/order/marker';

  const { push } = useRouter();
  const list = ref([]);
  const info = ref({});
  const current = ref(-1);
  const tableData = ref([]);
  const goods_list = ref([]);
  const ornament_list = ref([]);
  const new_exchange_list = ref([]);
  const junk_exchange_list = ref([]);
  const junk_recovery_list = ref([]);
  const gift_list = ref([]);
  const showMember = ref(false);
  const showsearch = ref(false);
  const form = reactive({
    order_sn: '',
    sales_start_time: '',
    sales_end_time: '',
    main_salesman_id: '',
    vice_salesman_id: '',
    name: '',
    mobile: '',
    pay_type: '',
    bar_code: ''
  });

  onMounted(() => {
    searchMember();
  });

  const getMember = (val) => {
    console.log('val==', val);
    form.mobile = val.mobile;
    showMember.value = false;
    searchMember();
  };

  const searchMember = () => {
    get_maker_list(form).then((res) => {
      list.value = res;
      if (list.value.length < 1) {
        message.warning('没有挂单单据');
      }
    });
  };
  const doSearch = (val) => {
    get_maker_list(val).then((res) => {
      showsearch.value = false;
      list.value = res;
      if (list.value.length < 1) {
        message.warning('没有挂单单据');
      }
    });
  };
  const getDetail = (item, index) => {
    detail({
      order_sn: item.order_sn
    }).then((res) => {
      current.value = index;
      info.value = res.order;
      /* res.order_item.forEach((item) => {
				item.sticker_price = item.info.sticker_price;
			}); */
      tableData.value = res.order_item;
      goods_list.value = res.order_item.goods_list;
      ornament_list.value = res.order_item.ornament_list;
      new_exchange_list.value = res.order_item.new_exchange_list;
      res.order_item.junk_exchange_list.forEach((item) => {
        //原金重
        item.gold_weight_old = item.info.gold_weight;
      });
      junk_exchange_list.value = res.order_item.junk_exchange_list;
      res.order_item.junk_recovery_list.forEach((item) => {
        //原金重
        item.gold_weight_old = item.info.gold_weight;
      });
      junk_recovery_list.value = res.order_item.junk_recovery_list;
      gift_list.value = res.order_item.gift_list;
    });
  };
  const continueOpt = () => {
    if (!info.value.member_id || !info.value.order_sn) {
      return message.error('请选择挂单单据！');
    }
    push({
      path: '/order/order/jewelry_order',
      query: {
        mobile: info.value.mobile,
        member_id: info.value.member_id,
        order_sn: info.value.order_sn
      }
    });
  };
  const delOpt = () => {
    Modal.confirm({
      title: '提示',
      content: '确定删除，删除后不可恢复?',
      maskClosable: true,
      onOk: () => {
        shanchu();
      }
    });
  };
  const shanchu = () => {
    del_maker({
      order_sn: info.value.order_sn
    })
      .then((res) => {
        searchMember();
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
</script>
